<template>
    <!-- 导航栏 -->
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <!-- 搜索 -->
    <van-search 
        v-model="searchValue" 
        show-action 
        placeholder="请输入搜索关键词" 
        disabled
        @click="onClickButton"
    >
        <template #action>
            <div >搜索</div>
        </template>
    </van-search>
    <!-- 分类选择 -->
    <van-tree-select v-model:main-active-index="activeIndex" height="200vw" :items="categoryList" v-model="activeId"
        @click-nav="onSelector">
        <template #content>
            <div class="m-box" v-for="(item, index) in selectList" :key="item.id"  @click="onDetail(item.id)" >
                <img :src="item.picture" alt="logo" />
                <div class="m-right">
                    <p>{{ item.product }}</p>
                    <p>￥{{ item.price }}</p>
                </div>
            </div>
        </template>
    </van-tree-select>
</template>

<script setup lang="ts">
import {useCategory} from '@/hooks/category'
import {useProductDetail} from '@/hooks/home'

const {onDetail}=useProductDetail()
const {activeId,activeIndex,categoryList,selectList,searchValue,onSelector,onClickButton}=useCategory()
const onClickLeft = () => history.back();
</script> 

<style scoped lang="scss">
// 搜索
.van-search {
    display: flex;

}

.m-box {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
    margin-top: 50px;

    img {
        width: 150px;
        height: 150px;
    }

    p {
        display: block;
        width: 150px;
    }
}
</style> 


<style lang="scss" scoped>

</style>  